<template>
    <div class="Collections" :class="{'bottomts':is_vip ===0}">
        <div class="bg-img" v-if="state">
            <img src="../../assets/img/Collection/Group.png" alt="">
        </div>
        <div class="Collection" v-if="!state" @touchmove="Move">
            <Banner :ImgObj="ImgObj" style="padding: 2rem"></Banner>
            <Inform :num="user_info.vocabulary" v-show="false"></Inform>
            <div class="cines">
                <div v-if="order.recommend_name && book_orders.length!==0" v-for=" order in book_orders">
                    <div class="title">
                        <span class="main-title">{{order.recommend_name}}</span>
                        <span class="sub-title">
                <img src="../../assets/img/Collection/up.png"/> {{order.recommend_desc}} <img
                                src="../../assets/img/Collection/down.png"/>
              </span>
              <div class="query-more" @click="showMore(order)">查看更多<i class="icon iconfont icon-jinru"></i></div>
          </div>
          <BookListLoad v-if="order.recommendBookList" :book_list="order.recommendBookList" :is_vip='is_vip' v-on:selectBook="goChapter" ></BookListLoad>
        </div>
        <div class="">
        <!--<div class="" v-show="recommend_books.length!==0">-->
          <div class="title">
              <!--<i class="iconfont icon-zuixinshuji"></i>-->
              <span class="main-title">新书推荐</span>
              <div class="space"></div>
              <span class="show-all" @click="showAll">全部书籍<i class="icon iconfont icon-jinru"></i></span>
          </div>
          <div>
            <!--<BooksList v-for="item2 in all_books" :obj="item2" :is_vip='is_vip' :key="item2.book_id" v-on:add="add"-->
                       <!--v-on:go="goChapter"></BooksList>-->
            <BookList :is_vip='is_vip' v-on:selectBook="goChapter" ></BookList>
            <!--<BookList v-if="recommend_books" :book_list="recommend_books" :is_vip='is_vip' v-on:selectBook="goChapter" ></BookList>-->
          </div>
        </div>
      </div>
      <div :style="{'padding-bottom':'7rem'}">
        <CollectPopup v-if="Popup" :img="erweiam" :istrue="Popup" v-on:hide="Popuphide"></CollectPopup>
      </div>
      <div class="Vipfooter" v-if="false">
        <div class="btn">
          <btn :obj='btnstyle' :text="textbtn" v-on:statr="go('BuyVip')"></btn>
        </div>
      </div>
    </div>
    <!--<infinite-loading @infinite='infiniteHandler' ref="infiniteLoading" force-use-infinite-wrapper="true">-->
        <!--<span slot="no-more">-->
        <!--</span>-->
    <!--</infinite-loading>-->
  </div>
</template>

<script>
  import Banner from '../../components/Banner/index'
  import Inform from '../../components/Inform/index'
  // import BooksList from '../../components/BooksList/index'
  import BookList from '../../components/BookList/Index'
  import BookListLoad from '../../components/BookListLoad/Index'
  import CollectPopup from '../../components/CollectPopup/index'
  import {Toast, Indicator} from 'mint-ui'
  import btn from '../../components/btn/index'
  import InfiniteLoading from 'vue-infinite-loading';

    export default {
        name: 'index',
        data: function () {
            return {
                items: {},
                state: true,
                loading: false,
                Popup: false,
                data: {
                    share_id: this.$route.query.share_id || -1,
                    share_token: this.$route.query.share_token || -1,
                    page_index: 0
                },
                totalPage: 3,
                all_books: [],
                ImgObj: [],
                user_info: {},
                is_vip: 0,
                recommend_books: [],
                // 书单列表
                book_orders: [],
                // 书单分页
                page_orders_index: 0,
                btnstyle: {
                    backgroundColor: '#ffd000',
                    width: '80%',
                    color: '#66440a',
                    opacity: 1
                },
                textbtn: '立即加入会员',
                erweiam: 'http://readingh5-on-line.oss-cn-hangzhou.aliyuncs.com/images/showqrcode.jpeg',
                subscribe: 0,
            }
        },
        mounted: function () {
            // this.infiniteHandler()
            this.getBookOrders()
            this.Upimg()
            // this.Update()
            // 如果未获取vip，获取是否是vip
            if (!window.sessionStorage.getItem('ten_is_vip')) {
                this.$axios.get_user(this.$Login.Vip_token).then(res => {
                    this.is_vip = res.data.qing_data.is_vip
                    // 将十分读书的会员状态存到session中
                    window.sessionStorage.setItem('ten_is_vip', res.data.qing_data.is_vip)
                    if (this.is_vip === 0) {
                        this.textbtn = '立即加入会员'
                    } else {
                        this.textbtn = '查看我的书籍'

                    }
                })
            } else {
                this.is_vip = parseInt(window.sessionStorage.getItem('ten_is_vip'))
            }

        },
        methods: {
            Upimg: function () {
                this.$axios.adver_list({
                    adver_type: 3
                }).then(res => {
                    this.state = false
                    this.ImgObj = res.data.qing_data.adver_info
                    this.user_info = res.data.qing_data.user_info
                    this.erweiam = res.data.qing_data.qr_code
                    this.subscribe = res.data.qing_data.subscribe
                })
            },
            setdata: function (obj) {
                var list
                if (obj.leng === 1) {
                    list = this.recommend_books
                } else {
                    list = this.all_books
                }
                list[obj.index].collection_state = 1
                if (obj.leng === 1) {
                    this.recommend_books = list
                } else if (obj.leng === 2) {
                    this.all_books = list
                }
            },
            add: function (obj) {
                if (this.is_vip === 0) {
                    var querye = sessionStorage.getItem('querye')
                    if (!querye) {
                        querye = {}
                    } else {
                        querye = JSON.parse(querye)
                    }
                    return this.go('BuyVip',querye)
                }
                this.$axios.books_add(obj).then(res => {
                    if (res.data.qing_code !== 100) {
                        return
                    }
                    Toast({
                        message: '添加成功',
                        iconClass: 'iconfont icon-tianjiachenggong',
                        duration: 2000
                    })
                    this.setdata(obj)
                })
            },
            go: function (str) {
                if (this.is_vip === 0) {
                    var querye = sessionStorage.getItem('querye')
                    if (!querye) {
                        querye = {}
                    } else {
                        querye = JSON.parse(querye)
                    }
                    this.$router.push({
                        name: str,
                        query: Object.assign({
                            share_id: this.data.share_id || -1,
                            share_token: this.data.share_token || -1,
                        }, querye)
                    })
                } else {
                    this.$router.push({
                        name: 'Home'
                    })
                }
            },
            goChapter: function (item) {
                var querye = sessionStorage.getItem('querye')
                if (!querye) {
                    querye = {}
                } else {
                    querye = JSON.parse(querye)
                }
                this.$router.push({
                    name: 'Chapter',
                    query: Object.assign({
                        book_id: item.book_id,
                        platform_book_id: item.platform_book_id
                        // recommend_type:2
                    }, querye)
                })
            },
            // 展示全部书籍
            showAll: function () {
                this.$router.push({
                    name: 'BookTypes'
                })
            },
            // 展示更多书籍
            showMore: function (item) {
                this.$router.push({
                    name: 'BookOrders',
                    query: {
                        recommend_cover: item.recommend_cover,
                        post_id: item.post_id
                    }
                })
            },
            Popuphide: function () {
                this.Popup = false
            },
            Move: function () {
                if (this.subscribe === 0) {
                    this.Popup = true
                    ++this.subscribe
                }
            },
            // infiniteHandler: function () {
            //   ++this.data.page_index
            //   // 获取书单列表只调用一次
            //   if(this.data.page_index === 1){
            //     this.getBookOrders()
            //   }
            //   // 获取推荐书籍列表
            //   this.$axios.new_recommend_book({
            //     params:{
            //       is_recommend:1,
            //       page_index:this.data.page_index,
            //       user_token:this.$Login.oauth_token.user_token
            //     }
            //   }).then(res=>{
            //     // 只获取第一页
            //     if(res.data.qing_code === 303){
            //       return
            //     }else{
            //       this.recommend_books = this.recommend_books.concat(res.data.qing_data)
            //       this.infiniteHandler()
            //     }
            //   })

        // if (this.data.page_index > this.totalPage) {
        //   $state.complete();
        //   return
        // }
        // this.$axios.books_list(this.data).then(res => {
        //   this.state = false
        //   if (res.data.qing_code === 303) {
        //     $state.complete();
        //     return
        //   }
        //   if (res.data.qing_data.is_vip) {
        //     this.is_vip = res.data.qing_data.is_vip
        //     if (this.is_vip === 0) {
        //       this.textbtn = '立即加入会员'
        //     } else {
        //       this.textbtn = '查看我的书籍'
        //
        //     }
        //   }
        //   if (res.data.qing_data.total) {
        //     this.totalPage = res.data.qing_data.total
        //   }
        //   if (res.data.qing_data.all_books) {
        //     this.all_books.push.apply(this.all_books, res.data.qing_data.all_books)
        //     this.all_books.forEach((item, i) => {
        //       item.index = i
        //       item.leng = 2
        //     })
        //   }
        //   if (res.data.qing_data.recommend_books) {
        //     this.totalPage = res.data.qing_data.total
        //     this.recommend_books = res.data.qing_data.recommend_books
        //     this.recommend_books.forEach((item, i) => {
        //       item.index = i
        //       item.leng = 1
        //     })
        //   }
        //   // $state.loaded();
        //
        // })
      // },
      // 获取书单列表 1书单  2助力
      getBookOrders:function () {
        this.page_orders_index = this.page_orders_index +1
        let params = {
          params:{
            recommend_type:1,
            page_index:this.page_orders_index,
            user_token:this.$Login.oauth_token.user_token
          }
        }
        this.$axios.recommend_book(params).then(res=>{
          if(res.data.qing_data.recommendsList){
            this.book_orders = this.book_orders.concat(res.data.qing_data.recommendsList)
            // 遍历书单填充书籍
            this.book_orders.forEach((val)=>{
              val.recommendBookList = res.data.qing_data.bookList.filter((book)=>{
                if(book.category_id === val.post_id){
                  return true
                }
              })
            })
          }
        })
      }
    },
    components: {
      Banner,
      Inform,
      BookList,
      BookListLoad,
      CollectPopup,
      btn,
      InfiniteLoading
    }
  }
</script>

<style scoped>
    @import "../../assets/css/views/Collection/index.css";

    .BooksList .body .text .doc {
        text-align: left;
        color: #90999e;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .BooksList .body .text .title .name {
        font-size: 1.5rem;
        color: #2a2a33;
        width: 70%;
        text-align: left;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
    }
</style>
